<template>
   <div class="block-padding">
     <swiper :options="swiperOption">
       <swiper-slide v-for="(slide,index) in swiperSlides" :key="index">
         <img :src="slide" alt="">
       </swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
   </div>

</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "SwperBanner",
        data(){
            return{
              swiperOption: {
                pagination: {
                  el: '.swiper-pagination',

                },
                loop: true,
                autoplay: {
                  disableOnInteraction: false,
                },
              },
              swiperSlides: ['https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1112264.jpg?max_age=2592000', 'https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1114054.jpg?max_age=2592000', 'https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1114800.jpg?max_age=2592000']
            }
        },
      components: {
        swiper,
        swiperSlide
      }
    }
</script>

<style scoped lang="less">
  .block-padding{
    padding: 20px 17px 10px;
    background-color: #fff;
    margin-bottom: 10px;
    img{
      width: 100%;
    }
  }
</style>
